<script lang="ts" setup>
import HeaderBi from "./components/headerBi.vue";
import FooterBi from "./components/footerBi.vue";
import TemplateNew from "./template/components/template.vue";
import { ref, onMounted } from "vue";
import { getScreenList } from "../../apis/largescreen";
import useLoading from "../../utils/loading";
import YkiteFullScreenContainer from "./template/components/ykite-full-screen-container.vue";
const { loading, setLoading } = useLoading(true);

const renderData = ref<any>({
  pageTemplate: '',
  pageName: "",
  cardList: {
    leftTop: [],
    rightTop: [],
    bottomList: [],
  },
  backgroud : {
    url: "",
    type: ""
  },
});


const getScreenData = async () => {
  setLoading(true);
  try {
    const res = await getScreenList();
    if( res.data.code === 200 ){
      renderData.value = res.data.data;
      console.log(renderData)
    }
  } catch (error) {
    console.log(error);
  } finally {
    setLoading(false);
  }
}

onMounted(() => {
  getScreenData();
});


</script>

<template>
  <YkiteFullScreenContainer>
    <div class="container-bg-box">
      <img class="image-background" src="http://demo.file.apertus.cn/cloud/2024/07/30/9089dc34bcbac191660b164a16970238370c17ffb6ac1-PH1AsB_fw1200_20240730080921A023.png">
    </div>
    <div class="header-view">
      <HeaderBi :pageName="renderData.pageName"  />
    </div>
    <div class="midden-view">
      <TemplateNew v-if="renderData.pageTemplate ==2" :pageInfo="renderData"/>
    </div>
    <div class="footer-view">
      <FooterBi :pageName="renderData.pageName" />
    </div>
  </YkiteFullScreenContainer>
</template>

<style lang="less" scoped>

#ykite-full-screen-container {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff;
  font-family: Source Han Sans;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  .container-bg-box {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;

    .image-background {
      width: 100%;
      height: 100%;
      object-fit: cover;
      min-height: 800px;
    };
  };
  .header-view {

    padding: 0 32px;
    height: 80px;
    font-size: 28px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
  };

  .midden-view {

    height: calc(100% - 160px);
  };

  .footer-view {

    height: 40px;
  };
}

</style>